<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="活动名称" prop="activityName">
				<el-input v-model="queryParams.activityName" placeholder="请输入活动名称" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="活动类型" prop="activityType">
				<el-input v-model="queryParams.activityType" placeholder="请输入活动类型" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:acitivityinfo:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:acitivityinfo:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:acitivityinfo:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
					v-hasPermi="['system:acitivityinfo:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="acitivityinfoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="活动名称" align="center" prop="activityName" />
			<el-table-column label="活动类型" align="center" prop="activityType" />
			<el-table-column label="投票曲目" align="center">
				<template slot-scope="scope">
					{{getMusicName(scope.row.activityItems)}}
				</template>
			</el-table-column>
			<el-table-column label="抽奖奖项" align="center">
				<template slot-scope="scope">
					{{getjiangpin(scope.row.activityAwards)}}
				</template>
			</el-table-column>
			<el-table-column label="中奖人数" align="center">
				<template slot-scope="scope">
					{{getjiangpinMenber(scope.row.activityAwards)}}
				</template>
			</el-table-column>
			<el-table-column label="app封面" align="center" prop="appBannerUrl" width="100">
				<template slot-scope="scope">
					<image-preview :src="scope.row.appBannerUrl" :width="50" :height="50" />
				</template>
			</el-table-column>

			<el-table-column label="PC封面" align="center" prop="pcBannerUrl" width="100">
				<template slot-scope="scope">
					<image-preview :src="scope.row.pcBannerUrl" :width="50" :height="50" />
				</template>
			</el-table-column>

			<el-table-column label="活动上线时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="活动更新时间" align="center" prop="updateTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="0:创建；1：开始 ：9 结束" align="center" prop="activityStatus" />
			<!-- <el-table-column v-if="activityStatus==1" label=活动状态" align="center" prop="活动创建成功" /> -->
			<el-table-column label="拓展" align="center" prop="jsonConfig" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="startactivity(scope.row)"
						v-hasPermi="['system:acitivityinfo:edit']">开始活动</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate(scope.row)"
						v-hasPermi="['system:acitivityinfo:remove']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						v-hasPermi="['system:acitivityinfo:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改活动报名信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="活动名称" prop="activityName">
					<el-input v-model="form.activityName" placeholder="请输入活动名称" />
				</el-form-item>
				<el-form-item label="活动类型" prop="activityType">
					<el-input v-model="form.activityType" placeholder="请输入活动类型" />
				</el-form-item>
				<el-form-item label="app封面" prop="appBannerUrl">
					<el-upload class="upload-demo" :action="upUrl" name="multipartFile" :on-change="onChangeFile"
						v-model="form.appBannerUrl" ref="uploadComp" :limit="2" :on-exceed="handleExceed"
						:on-success="hanldeSuccess" :show-file-list="true" :auto-upload="true">
						<el-button type="warning" plain icon="el-icon-upload" size="mini"
							@click="handleImportMusic">封面</el-button>
					</el-upload>
				</el-form-item>
				<el-form-item label="PC封面" prop="pcBannerUrl">
					<el-upload class="upload-demo" :action="upUrl" name="multipartFile" :on-change="onChangeFile"
						v-model="form.pcBannerUrl" ref="uploadComp" :limit="2" :on-exceed="handleExceed"
						:on-success="hanldeSuccess1" :show-file-list="true" :auto-upload="true">
						<el-button type="warning" plain icon="el-icon-upload" size="mini"
							@click="handleImportMusic">封面</el-button>
					</el-upload>
				</el-form-item>
				<el-form-item label="投票类型" prop="form.voteType">
					<el-select v-model="value" @change="selectChanged" placeholder="选择类型:" clearable>
						<el-option v-for="dict in categorys" :key="dict.id" :label="dict.text" :value="dict.id" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="form.voteType==2" label="多选曲目数">
					<el-input @input="change()" v-model="form.selectCount" placeholder="请输入曲目数" />
				</el-form-item>
				<el-form-item label="奖项">
					<el-button type="" @click="add()">新增</el-button>
				</el-form-item>
				<div v-for="(item,index) in activityAwards" :key="index"
					style="display: flex;flex-direction: row;margin-top: 15px;justify-content:space-between;">
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;">
						奖项名:
						<el-input v-model="item.awardName" style="width: 100px;" placeholder="奖项名称" />
					</div>
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;">
						奖品名:
						<el-input v-model="item.prize" style="width: 100px;" placeholder="奖品名称" />
					</div>
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;">
						中奖人数:
						<el-input v-model="item.winnerNumbers" style="width: 100px;" placeholder="中奖人数" />
					</div>
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;"
						@click="del(item,index)">
						删除
					</div>
				</div>
				<el-form-item style="margin-top: 20px;" label="曲目" prop="bookCategory">
					<el-button type="" @click="addMusic()">新增</el-button>
				</el-form-item>
				<div v-for="(item,index) in activityItems" :key="index"
					style="display: flex;flex-direction: row;margin-top: 15px;justify-content:space-between;">
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;">
						编号:{{index}}
						<!-- <el-input v-model="index" style="width: 100px;" placeholder="奖项名称" /> -->
					</div>
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;">
						曲名:
						<el-input v-model="item.itemName" style="width: 100px;" placeholder="奖品名称" />
					</div>
					<div style="display: flex;flex-direction: row;text-align: center;align-items: center;"
						@click="delMusic(item,index)">
						删除
					</div>
				</div>
				<el-form-item style="margin-top: 20px;" label="拓展">
					<!-- <el-input style="height: 200px;" @input="change()" v-model="form.jsonConfig" placeholder="请输入拓展内容" /> -->
					<!-- <input type="text" style="height: 200px;" id="" v-model="form.jsonConfig" value="" /> -->
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
						v-model="form.jsonConfig">
						@input="(val) => changeInputEvent(val, item)"
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listAcitivityinfo,
		getAcitivityinfo,
		delAcitivityinfo,
		addAcitivityinfo,
		updateAcitivityinfo,
		AcitivityOperate,
		Docactivityawards,
		Docactivityitems
	} from "@/api/system/acitivityinfo";

	export default {
		name: "Acitivityinfo",
		data() {
			return {
				edittype: 0, //0新增1修改
				value: '单选',
				categorys: [{
					id: 1,
					text: "单选"
				}, {
					id: 2,
					text: "多选"
				}],
				activityList: [{
					id: 0,
					text: "创建"
				}, {
					id: 1,
					text: "开始"
				}, {
					id: 9,
					text: "结束"
				}],
				activityItems: [],
				activityAwards: [],
				upUrl: process.env.VUE_APP_BASE_API + '/v1/app/public/upload',
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 活动报名信息表格数据
				acitivityinfoList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					activityName: null,
					appBannerUrl: null,
					pcBannerUrl: null,
					activityType: null,
					startTime: null,
					endTime: null,
					deadLine: null,
					status: null,
					activityContent: null,
					bookCategory: null,
					// voteType: 1,
					// selectCount: 1
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {}
			};
		},
		mounted() {

		},
		created() {
			this.getList();
		},
		methods: {
			changeInputEvent(val, item) {
				item.searchText = val;
				this.$forceUpdate()
			},
			change(e) {
				console.log('----------------------当前输入', e)
				this.$forceUpdate()
			},
			onChangeFile(data) {},
			handleExceed(multipartFiles, multipartFileList) {
				this.$message.warning(
					`当前限制选择 3 个文件，本次选择了 ${multipartFiles.length} 个文件，共选择了 ${multipartFiles.length + multipartFileList.length} 个文件`
				);
			},
			getactivityStatus(data) {
				let msg = ''
				if (data.activityStatus == 1) { //（状态，0:创建；1：开始 ：9 结束）
					msg = '活动已经开始'
				} else if (data.activityStatus == 9) {
					msg = '活动已经结束'
				} else {
					msg = '活动创建成功'
				}
				return msg
			},
			startactivity(row) {
				console.log('当前选中的数据=========', row)
				let data = row
				let type = data.activityStatus
				let msg = ''
				if (type == 0 || type == 9) { //（状态，0:创建；1：开始 ：9 结束）
					data.activityStatus = 1
					msg = '活动开始'
				} else {
					data.activityStatus = 9
					msg = '活动结束'
				}
				AcitivityOperate(data).then(response => {
					this.$message.success(msg);
				});
			},
			selectChanged(value) {
				console.log('当前选中的是----', value)
				this.form.voteType = value
				if (value == 1) {
					this.form.selectCount = 1
				}
			},
			hanldeSuccess(res, multipartFile, multipartFileList) {
				if (res.code == 200) {
					this.form.appBannerUrl = res.data.url
				}
				// this.getList()
			},
			hanldeSuccess1(res, multipartFile, multipartFileList) {
				if (res.code == 200) {
					this.form.pcBannerUrl = res.data.url
				}
			},
			handleSuccess(response, file, fileList) {
				// 处理成功上传
				if (response.code === 200) {
					// 假设您的API响应包含已上传文件的URL
					this.form.imgUrl = response.data.url;
					this.$message.success('上传成功');
				} else {
					this.$message.error('上传失败');
				}
			},
			addMusic() {
				let item = {
					itemName: ''
				}
				this.activityItems.push(item)
			},
			delMusic(item, index) {
				console.log('删除前', this.activityItems)
				this.activityItems.splice(index, 1)
				console.log('删除后', this.activityItems)
				let ids = item.id
				if (this.edittype == 1) {
					this.$modal.confirm('是否确认删除曲目编号为"' + ids + '"的数据项？').then(function() {
						return Docactivityitems(ids);
					}).then(() => {
						this.$modal.msgSuccess("删除成功");
					}).catch(() => {});
				}
			},
			getjiangpin(data) {
				let item = []
				for (var i = 0; i < data.length; i++) {
					// let dataItem = {
					//   data[i].awardName:data[i].prize
					// }
					let itemStr = data[i].awardName + ":" + data[i].prize
					item.push(itemStr)
				}
				return item.join(',')
			},
			getjiangpinMenber(data) {
				let item = []
				for (var i = 0; i < data.length; i++) {
					// let dataItem = {
					//   data[i].awardName:data[i].prize
					// }
					let itemStr = data[i].awardName + ":" + data[i].winnerNumbers
					item.push(itemStr)
				}
				return item.join(',')
			},
			getMusicName(data) {
				let item = []
				for (var i = 0; i < data.length; i++) {
					item.push(data[i].itemName)
				}
				return item.join(',')
			},
			add() {
				let item = {
					awardName: '',
					prize: '',
					awardName: ''
				}
				this.activityAwards.push(item)
			},
			del(item, index) {
				console.log('删除前', this.activityAwards)
				this.activityAwards.splice(index, 1)
				console.log('删除后', this.activityAwards)
				let ids = item.id
				if (this.edittype == 1) {
					this.$modal.confirm('是否确认删除奖项编号为"' + ids + '"的数据项？').then(function() {
						return Docactivityawards(ids);
					}).then(() => {
						this.$modal.msgSuccess("删除成功");
					}).catch(() => {});
				}
			},
			/** 查询活动报名信息列表 */
			getList() {
				this.loading = true;
				listAcitivityinfo(this.queryParams).then(response => {
					this.acitivityinfoList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			handleImportMusic() {
				console.log("~~@@@@@@~~~~~")
			},
			// 表单重置
			reset() {
				this.form = {
					// id: null,
					// activityName: null,
					// url: null,
					// startTime: null,
					// endTime: null,
					// deadLine: null,
					// status: null,
					// activityContent: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.edittype = 0;
				this.form.voteType = 1
				this.form.selectCount = 1
				this.title = "新增活动";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.edittype = 1;
				// this.reset();
				const id = row.id || this.ids
				getAcitivityinfo(id).then(response => {
					this.form = response.data;
					if (this.form.voteType == 1) {
						this.value = '单选'
					} else {
						this.value = '多选'
					}

					this.activityItems = response.data.activityItems
					this.activityAwards = response.data.activityAwards
					console.log('点击修改=============================', this.activityItems, this.activityAwards)
					this.open = true;
					this.title = "修改活动报名信息";
				});
			},
			/** 提交按钮 */
			submitForm() {

				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							// let data = {
							// 	activityName: this.form.activityName,
							// 	appBannerUrl: this.form.appBannerUrl,
							// 	pcBannerUrl: this.form.pcBannerUrl,
							// 	activityType: this.form.activityType,
							// 	activityAwards: this.activityAwards,
							// 	activityItems: this.activityItems,
							// 	voteType: this.form.voteType,
							// 	selectCount: this.form.selectCount,
							// }
							console.log('点击修改提交的内容======', this.form)
							updateAcitivityinfo(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							// activityName: null,
							// appBannerUrl: null,
							// pcBannerUrl: null,
							// activityType:null
							let data = {
								activityName: this.form.activityName,
								appBannerUrl: this.form.appBannerUrl,
								pcBannerUrl: this.form.pcBannerUrl,
								activityType: this.form.activityType,
								activityAwards: this.activityAwards,
								activityItems: this.activityItems,
								voteType: this.form.voteType,
								selectCount: this.form.selectCount,
								activityStatus: 0,
								jsonConfig:this.form.jsonConfig
							}
							console.log('请求提交的内容是', data)
							addAcitivityinfo(data).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除活动报名信息编号为"' + ids + '"的数据项？').then(function() {
					return delAcitivityinfo(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/acitivityinfo/export', {
					...this.queryParams
				}, `acitivityinfo_${new Date().getTime()}.xlsx`)
			}
		}
	};
</script>